<template>
  <div class="app-container">
<!--
        页面搜索框
-->
    <el-row>
      <el-form ref="form" :model="queryParams" label-width="80px">
        <el-col :span="6">
          <el-form-item label="主体名称">
            <el-input v-model="queryParams.subjectName" size="small" placeholder="请输入主体名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="注册手机">
            <el-input v-model="queryParams.mobilePhone" size="small" placeholder="请输入注册手机号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否会员">
            <el-select v-model="queryParams.memberFlag" size="small" placeholder="请选择是否会员" style="width: 240px">
              <el-option
                v-for="dict in dict.type.njt_member_flag"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if="toggleContent">
          <el-col :span="6">
            <el-form-item label="用户状态">
              <el-select v-model="queryParams.status" size="small" placeholder="请选择用户状态" style="width: 240px">
                <el-option label="正常" :value="0"></el-option>
                <el-option label="冻结" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="6">
          <el-form-item label-width="0" style="margin-left: 20px">
            <el-button type="primary" icon="el-icon-search" size="small" style="margin-right: 10px" @click="getPage">搜索
            </el-button>
            <el-button type="primary" icon="el-icon-refresh" size="small">重
              置
            </el-button>
            <a style="margin-left: 10px;color: #3a8ee6"
               @click="toggleContentHandle">
              {{ toggleContent ? '收起' : '展开' }}
              <i v-if="toggleContent" class="el-icon-arrow-up"></i>
              <i v-else class="el-icon-arrow-down"></i>
            </a>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

<!--
        导出部分
-->
    <el-row>
      <el-col :span="24">
        <el-button type="primary" icon="el-icon-download" size="medium" style="margin-right: 10px" @click="handleExport">导出</el-button>
        <el-button type="danger" icon="el-icon-delete" size="medium">批量删除</el-button>
      </el-col>
    </el-row>


<!--
        表格内容
-->
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <!--border:当布尔属性默认值为false时，显式的使用该属性，就表示设置该属性为true-->
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="subjectName" label="主体名称" width="280" align="center"></el-table-column>
          <el-table-column prop="mobilePhone" label="注册手机号" width="180" align="center"></el-table-column>
          <el-table-column prop="registerTime" label="注册时间" align="center"></el-table-column>
          <el-table-column label="营业执照" align="center">
            <template slot-scope="scope">
              <image-preview width="60" height="80" src="http://t2zmw2aej.hn-bkt.clouddn.com/one.jpg?e=1758541126&token=vCl0_kS3E2UWaA5TiJ_Y68APEN4x5mqfPjACDGcx:XtW_BWyVd2OWKTsGlUKcU86MIjQ=,http://t2zmw2aej.hn-bkt.clouddn.com/two.jpg?e=1758541214&token=vCl0_kS3E2UWaA5TiJ_Y68APEN4x5mqfPjACDGcx:C0grZ5c8RdYP0kvGDanXOuD-FH0="
            />
            </template>
          </el-table-column>
          <el-table-column label="信息是否完善" align="center">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.njt_perfect_flag" :value="scope.row.perfectFlag"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否会员" align="center">
            <!--自定义列渲染，固定模版，借助关键字scope，可以获取当前表格行数据，用法：scope.row.对象属性名-->
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.memberFlag == 0">非会员</el-tag>
              <el-tag type="success" v-else-if="scope.row.memberFlag == 1">会员</el-tag>
              <el-tag type="info" v-else>错误</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="用户状态" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.userStatus == 0">正常</el-tag>
              <el-tag type="danger" v-else-if="scope.row.userStatus == 1">冻结</el-tag>
              <el-tag type="info" v-else>错误</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="deleteUser(scope.row.id)" style="color: red">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" style="margin-top: 20px" align="center">
        <el-pagination layout="prev, pager, next" :page-size="queryParams.pageSize" :total="total"  :current-page="queryParams.pageNum" @current-change="handleCurrentChange"></el-pagination>
      </el-col>
    </el-row>


    <!--   弹窗区域：一般用于新增或编辑弹窗-->
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
      <!--添加表单组件-->
      <el-form ref="updateForm" :model="editObjects" label-width="100px">
        <el-form-item label="主体名称">
          <el-input v-model="editObjects.subjectName" placeholder="请输入主体名称"></el-input>
        </el-form-item>
        <el-form-item label="注册手机号">
          <el-input v-model="editObjects.mobilePhone" placeholder="请输入注册手机号">
          </el-input>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-input v-model="editObjects.registerTime" placeholder="请输入注册时间"></el-input>
        </el-form-item>
        <el-form-item label="是否会员">
          <el-select v-model="editObjects.memberFlag" placeholder="请选择是否会员域">
            <el-option
              v-for="dict in dict.type.njt_member_flag"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="信息是否完善">
          <el-select v-model="editObjects.perfectFlag">
            <el-option
              v-for="dict in dict.type.njt_perfect_flag"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select v-model="editObjects.userStatus" placeholder="请选择账号状态">
            <el-option label="正常" :value="0"></el-option>
            <el-option label="冻结" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!--对话框底部按钮组，固定代码结构-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {listNongjtUserRegister, updateNongjtUserRegister, deleteNongjtUserRegister} from "@/api/nongjt/user/request";
export default {
  name: "XXX",
  dicts:['njt_member_flag','njt_perfect_flag'],
  data() {
    return {
      /** 查询条件 */
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        subjectName: "",// 主体名称
        mobilePhone: "",// 注册手机号码
        registerTime: "",
        perfectFlag: undefined,
        memberFlag: undefined, // 是否会员，0表示非会员，1表示会员
        userStatus: undefined // 用户状态，0表示正常，1表示冻结
      },
      /** 切换搜索区域内容 */
      toggleContent: false, // 默认隐藏，值为true时显示
      tableData: [],
      total: 0,

      dialogVisible: false,// 默认不显示对话框
      /** 编辑对话框绑定对象 */
      editObjects:{
        subjectName: "",// 主体名称
        mobilePhone: "",// 注册手机号码
        registerTime: "",
        perfectFlag: undefined,
        memberFlag: undefined, // 是否会员，0表示非会员，1表示会员
        userStatus: undefined // 用户状态，0表示正常，1表示冻结
      }
    }
  },
  created() {
    this.getPage();
  },
  methods: {
    //导出
    handleExport(){
      this.download('/nongjt/userRegister/export', {
        ...this.queryParams
      },`会员注册信息_${new Date().getTime()}.xlsx`);
    },
    //分页查询
    getPage() {
      listNongjtUserRegister(this.queryParams).then(response => {
        //console.log(response);
        this.tableData = response.rows;
        this.total = response.total;
      });
    },
    updateUser(){
      updateNongjtUserRegister(this.editObjects).then(response => {
        console.log(this.editObjects);
        this.getPage();
        this.$modal.msgSuccess(response.msg);
        this.dialogVisible = false;
      }).catch(error => {
        console.log(this.editObjects);
        console.log(error);
      })
    },
    deleteUser(id){
      deleteNongjtUserRegister(id).then(response => {
        console.log(id);
        this.getPage();
        this.$modal.msgSuccess(response.msg);
      })
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getPage(); // 重新加载当前页数据
    },
    /* 分页页码查询，同上
    getPageByNum(pageNum) {
      console.log(pageNum);
      this.queryParams.pageNum = pageNum;
      this.getPage();
    },
    */
    toggleContentHandle() {
      this.toggleContent = !this.toggleContent
    },
    /** 打开编辑对话框方法 */
    openDialog(objData){
      Object.assign(this.editObjects,objData)
      this.dialogVisible = true;
    }
  }
}
</script>
